<template>
	<view class="store-list-wrap">
		<template v-for="item in storeList">
			<view class="store-list" @click.stop="handleStore(item)" :key="item.id">
				<view class="store-dis">
					<text class="store">{{item.name}}</text>
					<text class="cur badge" v-if="item.id && currentStoreInfo.id == item.id">当前选择的门店</text>
					<template v-if="!item.distance">
						<text class="dis">-- km</text>
					</template>
					<template v-else>
						<text class="dis" v-if="item.distance > 1">{{item.distance}}km</text>
						<text class="dis" v-else>{{item.distance * 1000}}m</text>
					</template>
				</view>
				<view class="address">{{item.detailAddress}}</view>
				<view class="time">
					<text class="iconfont yingyeshijiantubiao"></text>
					<text class="t">{{item.businessHoursText}}</text>
				</view>
				<view class="store-status">
					<template v-if="item.originalBusinessState==2 && item.openingCategory=='opening'">
						<template v-if="diningMode==='wx_out' && !item.isNear">
							<view class="status badge"><text>不可下单</text></view>
							<view class="beyond"><text class="iconfont icon-chaopeisongfanwei"></text></view>
						</template>
						<template v-else>
							<view class="status badge"><text>正常营业</text></view>
							<button class="go-order-btn l-btn btn-primary">去下单 </button>
						</template>
					</template>
					<template v-else-if="item.originalBusinessState==2 && item.openingCategory == 'beforeOpening' && item.preBook == 1 && diningMode != 'StoreEat'">
						<template v-if="diningMode === 'wx_out' && !item.isNear">
							<view class="status badge"><text>未营业 | 不可下预订单</text></view>
							<view class="beyond"><text class="iconfont icon-chaopeisongfanwei"></text></view>
						</template>
						<template v-else>
							<view class="status badge"><text>未营业 | 可下预订单</text></view>
							<button class="go-order-btn l-btn btn-primary">去下单</button>
						</template>
					</template>
					<template v-else>
						<view class="status badge"><text>不可下单</text></view>
						<view class="no-order-btn">
							{{item.originalBusinessState==2?openingCategoryMap[item.openingCategory]:newBusinessHoursMap[item.originalBusinessState]}}
						</view>
					</template>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		debounce
	} from '@/common/js/util.js';

	import {
		openingCategoryMap,
		newBusinessHoursMap
	} from '@/common/js/constant.js';

	export default {
		name: 'StoreList',
		props: {
			// 门店列表
			storeList: {
				type: Array
			}
		},
		data() {
			return {
				openingCategoryMap,
				newBusinessHoursMap
			};
		},
		computed: {
			// 就餐方式
			diningMode() {
				return this.$store.state.diningMode;
			},
			// 所有门店
			allStoreList() {
				return this.$store.state.allStoreList;
			},
			// 当前选择的门店
			currentStoreInfo() {
				return this.$store.state.currentStoreInfo;
			}
		},
		watch: {

		},
		mounted() {

		},
		methods: {
			// 处理点击的门店
			handleStore(store) {
				const {
					diningMode
				} = this;
				// 判断是否可以下单
				let isCanOrder = false;
				if (store.originalBusinessState == 2 && store.openingCategory == 'opening') {
					isCanOrder = true;
				} else if (store.originalBusinessState == 2 && store.openingCategory == 'beforeOpening' && store.preBook == 1 &&
					diningMode != 'StoreEat') {
					isCanOrder = true;
				} else {
					isCanOrder = false;
				}

				if (!isCanOrder || (this.diningMode === 'wx_out' && !store.isNear)) {
					return;
				}

				this.$emit("onTapStore", store);
			}
		}
	};
</script>

<style lang="less" scoped>
	@import '~@/common/styles/common.less';
	@import './store-list.less';
</style>
